<!--商品详情-->
<template>
	<div class="w store-content">
		<div class="gray-box">
			<div class="gallery-wrapper">
				<div class="gallery">
					<div class="thumbnail">
						<ul>
							<li v-for="item in small2" :class="{on:big2===item.ImgPathOrigin}" @click="big2=item.ImgPathOrigin">
								<img v-lazy="root + item.ImgPathOrigin" :alt="product2.ProductName">
							</li>
						</ul>
					</div>
					<div class="thumb">
						<div class="big">
							<img :src="root + big2" :alt="product2.ProductName">
						</div>
					</div>
				</div>
			</div>
			<!--右边-->
			<div class="banner">
				<div class="sku-custom-title">
					<h4>{{product2.ProductName}}</h4>
					<h6>
            <span>{{product2.ShortDescription}}</span>
            <span class="price">
              <em>¥</em><i>{{thatPrice}}</i></span>
          </h6>
				</div>
				<div class="num">
					<span class="params-name">累计评价：{{leijipingjia}}</span>
					<span class="params-name">好评率：{{haopinglv}}%</span>

				</div>
				<div class="num">
					<span class="params-name">数量</span>
					<buy-num @edit-num="editNum" :limit="Number(Stock)"></buy-num>
				</div>
				<div v-for="item in guige" class="num">
					<span class="params-name">选择{{item.AttributeName}}</span>
					<span v-for="itemChild in item.AttributeList">
	          	<span @click="selectGuiGe(itemChild, item.AttributeList, guige)" :class="{selected: itemChild.checked==1}" class="guige_item">{{itemChild.ValueStr}}</span>
					</span>
				</div>
				<div class="num">
					<span>库存数量：</span><span style="margin-left: 10px;">{{Stock}}</span>
				</div>
				<div class="buy">
					<y-button text="加入购物车" @btnClick="addCart(product2.Id,product2.CurrentPrice,product2.ProductName,product2.ImgPath)" :classStyle="Stock?'main-btn':'disabled-btn'" style="width: 145px;height: 50px;line-height: 48px"></y-button>
					<!--<y-button text="现在购买" @btnClick="checkout(product2.Id)" :classStyle="Stock?'main-btn':'disabled-btn'" style="width: 145px;height: 50px;line-height: 48px"></y-button>-->
				</div>
			</div>
		</div>
		<!--产品信息-->
		<div class="item-info">
			<div class="gray-box" style="padding-left: 15px; padding-right: 15px;padding-bottom: 15px;">
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="产品信息" name="first">
						<!--<div class="" v-html="product2.MobbileDescription">
							{{ product2.MobbileDescription }}
						</div>-->
						<div class="ql-editor">
							<div v-html="product2.MobbileDescription">
								{{ product2.MobbileDescription }}
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="产品评价" name="second">
						<div v-for="item in commentsList" class="" style="overflow: hidden;padding-bottom: 15px;">
							<div class="" style="width: 70%;float: left;">
								<el-rate v-model="item.ReviewMark" disabled>
								</el-rate>
								<div class="" style="margin: 10px 0;">
									<span class="" style="font-size: 12px;">{{item.ReviewContent}}</span>
								</div>
							</div>
							<div class="" style="width: 30%;float: right;text-align: right;">
								<p>评论用户：{{item.UserName}}</p>
								<p>{{item.ReviewDate}}</p>
							</div>
							<!--<div class="" style="clear: both;">
								{{item.ReviewDate}}
							</div>-->
							<div class="" style="clear: both;" v-if="item.ReplyContent">
								商家回复：{{item.ReplyContent}}
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
		<!--<div class="item-info">
			<div class="" v-html="product2.MobbileDescription">

			</div>
		</div>-->
		<!--<div class="item-info">
			<y-shelf title="产品信息">
				<div slot="content">
					<div class="img-item" v-if="product2.MobbileDescription">
						<div v-html="product2.MobbileDescription">{{ product2.MobbileDescription }}</div>
					</div>
					<div class="no-info" v-else>
						<img src="/static/images/no-data.png">
						<br> 该商品暂无内容数据
					</div>
				</div>
			</y-shelf>
		</div>-->
	</div>
</template>
<script>
	// require styles
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import { productDet, addCart, productDet2, fetchGuiGeData, getSkuId, GetComments } from '/api/goods'
	import { getGoodsDetails } from '/api/myApi'
	import { mapMutations, mapState } from 'vuex'
	import YShelf from '/components/shelf'
	import BuyNum from '/components/buynum'
	import YButton from '/components/YButton'
	export default {
		data() {
			return {
				rooot: this.root,
				productNum: 1,
				productMsg2: {},
				small2: [],
				big2: '',
				product2: {},
				guige: [],
				guigeId: [],
				guigeVal: '',
				SkuId: '',
				CartBtnDisable: false,
				Stock: 1000,
				activeName: 'first',
				commentsList: [],
				thatPrice: 0,
			}
		},
		computed: {
			...mapState(['login', 'showMoveImg', 'showCart']),
			leijipingjia: function() {
				let pingjianum = 0
				pingjianum = this.product2.One + this.product2.Tow + this.product2.Three + this.product2.Four + this.product2.Five
				return pingjianum
			},
			haopinglv: function() {
				let p = this.product2
				let hpl = 0
				if((p.One + p.Tow + p.Three + p.Four + p.Five) == 0) {
					return hpl
				}
				hpl = ((p.Three + p.Four + p.Five) / (p.One + p.Tow + p.Three + p.Four + p.Five)).toFixed(2) * 100
				return hpl
			}
		},
		methods: {
			...mapMutations(['ADD_CART', 'ADD_ANIMATION', 'SHOW_CART']),
			_GetComments(productId) {
				let _this = this
				GetComments(productId).then(res => {
					console.log('获取商品的评论列表res', res)
					if(res.code === 200) {
						_this.commentsList = res.data.list
					}
				})
			},
			_productDet2(productId) {
				let _this = this
				getGoodsDetails(productId).then(res => {
					console.log('商品轮播图res', res)
					if(res.code === 200) {
//						if(res.data.list.length>0) {
//							this.small2 = res.data.list
//							this.big2 = this.small2[0].ImgPathOrigin
//						}
					}
				})
				productDet2(productId).then(res => {
					console.log('商品详情res', res)
					if(res.code === 200) {
						let result = res.data
						this.product2 = result
					}
				})
				fetchGuiGeData(productId).then(res => {
					console.log('获取规格res', res)
					if(res.code === 200) {
						this.guige = res.data.list
						for(var i = 0; i < this.guige.length; i++) {
							for(var j = 0; j < this.guige[i].AttributeList.length; j++) {
								if(j == 0) {
									_this.guigeId.push([this.guige[i].AttributeId, this.guige[i].AttributeList[j].ValueId])
									_this.guigeVal += this.guige[i].AttributeName + ':' + this.guige[i].AttributeList[j].ValueStr
									//									_this.guigeVal.push([this.guige[i].AttributeName, this.guige[i].AttributeList[j].ValueStr])

									_this.$set(this.guige[i].AttributeList[j], 'checked', 1)
								} else {
									_this.$set(this.guige[i].AttributeList[j], 'checked', 0)
								}
							}
						}
						console.log('this.guige', this.guige)
						console.log('this.guigeVal', this.guigeVal)

					}
				})
			},
			addCart(id, price, name, img) {
				let params = {
					ProductId: id,
					SkuId: this.SkuId,
					Quantity: this.productNum,
					ProductName: name,
					ImgPath: img,
				}
				if(!this.showMoveImg) { // 动画是否在运动
					if(this.login) { // 登录了 直接存在用户名下
						addCart(params).then(res => {
							// 并不重新请求数据
							this.ADD_CART({
								productId: id,
								productPrice: price,
								productName: name,
								productImg: img,
								productNum: this.productNum,
								SkuId: this.SkuId,
								guigeVal: this.guigeVal
							})
						})
					} else { // 未登录 vuex
						this.ADD_CART({
							productId: id,
							productPrice: price,
							productName: name,
							productImg: img,
							productNum: this.productNum,
							SkuId: this.SkuId,
							guigeVal: this.guigeVal

						})
					}
					// 加入购物车动画
					var dom = event.target
					// 获取点击的坐标
					let elLeft = dom.getBoundingClientRect().left + (dom.offsetWidth / 2)
					let elTop = dom.getBoundingClientRect().top + (dom.offsetHeight / 2)
					// 需要触发
					this.ADD_ANIMATION({
						moveShow: true,
						elLeft: elLeft,
						elTop: elTop,
						img: img
					})
					if(!this.showCart) {
						this.SHOW_CART({
							showCart: true
						})
					}
				}
			},
			checkout(productId) {
				this.$router.push({
					path: '/checkout',
					query: {
						productId,
						num: this.productNum
					}
				})
			},
			editNum(num) {
				this.productNum = num
			},
			selectGuiGe(itemChild, AttributeList, guige) {
				let _this = this
				this.guigeId = []
				_this.guigeVal = ''
				for(var i = 0; i < AttributeList.length; i++) {
					AttributeList[i].checked = 0;
				}
				itemChild.checked = 1
				for(var j = 0; j < guige.length; j++) {
					for(var k = 0; k < guige[j].AttributeList.length; k++) {
						if(guige[j].AttributeList[k].checked == 1) {
							_this.guigeId.push([guige[j].AttributeId, guige[j].AttributeList[k].ValueId])
							_this.guigeVal += guige[j].AttributeName + ':' + guige[j].AttributeList[k].ValueStr
							//							_this.guigeVal.push([guige[j].AttributeName, guige[j].AttributeList[k].ValueStr])

						}
					}
				}
				console.log('this.guigeId', this.guigeId)
			},
			_getSkuId(params) {
				let _this = this
				getSkuId(params).then(res => {
					console.log('获取该规格商品的库存价格等信息', res)
					if(res.code === 200) {
						_this.SkuId = res.data.SkuId
						_this.Stock = res.data.Stock
						_this.big2 = res.data.SkuImg
						_this.thatPrice = res.data.SalePrice
						if(_this.SkuId.Stock == 0) {
							_this.CartBtnDisable = true
						}
						console.log('_this.SkuId', _this.SkuId)
					}
				})
			},
			handleClick: function() {

			}
		},
		components: {
			YShelf,
			BuyNum,
			YButton
		},
		created() {
			let id = this.$route.query.productId
			console.log('productId', id)
			this._productDet2(id)
			this._GetComments(id)
		},
		watch: {
			guigeId: {
				handler(curVal, oldVal) {　　　　　　　　　　　　
					console.log('curVal', curVal)　
					console.log('oldVal', oldVal)　　　　　　　　　　
					this._getSkuId({
						SkuItems: curVal
					})　　　　　　　　　
				},
				deep: true
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "../../assets/style/mixin";
	.store-content {
		clear: both;
		width: 1220px;
		min-height: 600px;
		padding: 0 0 25px;
		margin: 0 auto;
	}
	
	.gray-box {
		display: flex;
		padding: 60px;
		margin: 20px 0;
		.gallery-wrapper {
			.gallery {
				display: flex;
				width: 540px;
				.thumbnail {
					li:first-child {
						margin-top: 0px;
					}
					li {
						@include wh(80px);
						margin-top: 10px;
						padding: 12px;
						border: 1px solid #f0f0f0;
						border: 1px solid rgba(0, 0, 0, .06);
						border-radius: 5px;
						cursor: pointer;
						&.on {
							padding: 10px;
							border: 3px solid #ccc;
							border: 3px solid rgba(0, 0, 0, .2);
						}
						img {
							display: block;
							@include wh(100%);
						}
					}
				}
				.thumb {
					.big {
						margin-left: 20px;
					}
					img {
						display: block;
						@include wh(440px)
					}
				}
			}
		}
		// 右边
		.banner {
			width: 450px;
			margin-left: 10px;
			h4 {
				font-size: 24px;
				line-height: 1.25;
				color: #000;
				margin-bottom: 13px;
			}
			h6 {
				font-size: 14px;
				line-height: 1.5;
				color: #bdbdbd;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.sku-custom-title {
				overflow: hidden;
				padding: 8px 8px 18px 10px;
				position: relative;
			}
			.params-name {
				padding-right: 20px;
				font-size: 14px;
				color: #8d8d8d;
				line-height: 36px;
			}
			.num {
				padding: 8px 0 8px 10px;
				border-top: 1px solid #ebebeb;
				display: flex;
				align-items: center;
			}
			.buy {
				position: relative;
				border-top: 1px solid #ebebeb;
				padding: 30px 0 0 10px;
			}
		}
	}
	
	.item-info {
		.gray-box {
			padding: 0;
			display: block;
		}
		.img-item {
			width: 1220px;
			img {
				width: 100%;
				height: auto;
				display: block;
			}
		}
	}
	
	.no-info {
		padding: 200px 0;
		text-align: center;
		font-size: 30px;
	}
	
	.price {
		display: block;
		color: #d44d44;
		font-weight: 700;
		font-size: 16px;
		line-height: 20px;
		text-align: right;
		i {
			padding-left: 2px;
			font-size: 24px;
		}
	}
	
	.guige_item {
		display: inline-block;
		padding: 2px 8px;
		border: 1px solid #dcdcdc;
		border-radius: 4px;
		margin: 0 4px;
		cursor: pointer;
	}
	
	.num .selected {
		border: 1px solid red;
	}
</style>